<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td><input name="address" value=""/></td>
            <td><input name="name" value=""></td>
            <td><input name="phone" value=""></td>
            <td><button onclick="doInsert(this)">新增</button></td>
        </tr>
    </table>
    <table border="1">
        <tr>
            <td>地址</td>
            <td>姓名</td>
            <td>手机</td>
            <td>操作</td>
        </tr>
        <c:forEach var="i" items="${list}">
            <tr>
                <input name="id" type="hidden" value="${i.id}"/>
                <td><input name="address" value="${i.address}"/></td>
                <td><input name="name" value="${i.name}"></td>
                <td><input name="phone" value="${i.phone}"></td>
                <td>
                    <button onclick="doUpdate(this)">编辑</button>
                    <button onclick="doDelete(this)">删除</button>
                </td>
            </tr>
        </c:forEach>
    </table>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script>
        function doInsert(obj){
            var tr = $(obj).parent().parent();
            var params = {
                "address":$(tr).find("input[name='address']").val(),
                "name":$(tr).find("input[name='name']").val(),
                "phone":$(tr).find("input[name='phone']").val()
            }
            postCurrent("/save",params);
        }

        function doUpdate(obj){
            var tr=$(obj).parent().parent();
            var params = {
                "id":$(tr).find("input[name='id']").val(),
                "address":$(tr).find("input[name='address']").val(),
                "name":$(tr).find("input[name='name']").val(),
                "phone":$(tr).find("input[name='phone']").val()
            }
            postCurrent("/save",params);
        }
        function doDelete(obj){
            var tr=$(obj).parent().parent();
            var params = {
                "id":$(tr).find("input[name='id']").val()
            }
            postCurrent("/delete",params);
        }

        function postCurrent(url,params){
            var form = $("<form method='post'></form>");
            var input;
            form.attr({"action":url});
            $.each(params,function (key,value) {
                input = $("<input type='hidden'>");
                input.attr({"name":key});
                input.val(value);
                form.append(input);
            });
            $(document.body).append(form);
            form.submit();
        }

    </script>
</body>
</html>
